<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奖励记录</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .card-shadow {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        .tab-active {
            color: #1989fa;
            position: relative;
        }
        .tab-active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #1989fa;
            border-radius: 2px;
        }
        .filter-active {
            background-color: #1989fa;
            color: white;
        }
        .empty-state {
            background-image: url('https://s.coze.cn/image/AfO0Ziba9UY/');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="bg-white py-4 px-4 flex items-center border-b border-gray-100 sticky top-0 z-10">
        <button class="text-gray-500 mr-4">
            <i class="fas fa-chevron-left text-lg"></i>
        </button>
        <h1 class="text-lg font-medium flex-1 text-center">奖励记录</h1>
        <div class="w-6"></div> <!-- 占位保持标题居中 -->
    </div>

    <!-- 筛选区域 -->
    <div class="bg-white p-4 mb-3">
        <div class="flex mb-4">
            <div class="flex-1 mr-2">
                <div class="text-sm text-gray-500 mb-2">奖励类型</div>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 rounded-full text-sm filter-active">全部</button>
                    <button class="px-3 py-1 rounded-full text-sm bg-gray-100">现金奖励</button>
                    <button class="px-3 py-1 rounded-full text-sm bg-gray-100">积分奖励</button>
                </div>
            </div>
            <div class="flex-1 ml-2">
                <div class="text-sm text-gray-500 mb-2">时间筛选</div>
                <button class="px-3 py-1 rounded-full text-sm bg-gray-100 w-full text-left flex justify-between items-center">
                    <span>全部时间</span>
                    <i class="fas fa-chevron-down text-xs text-gray-400"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="bg-white rounded-lg p-4 mx-4 mb-4 card-shadow">
        <div class="flex justify-between mb-3">
            <div class="text-center flex-1">
                <div class="text-gray-500 text-sm mb-1">总现金奖励</div>
                <div class="text-xl font-bold text-red-500">¥328.50</div>
            </div>
            <div class="text-center flex-1 border-l border-r border-gray-100">
                <div class="text-gray-500 text-sm mb-1">总积分奖励</div>
                <div class="text-xl font-bold text-blue-500">1,250</div>
            </div>
            <div class="text-center flex-1">
                <div class="text-gray-500 text-sm mb-1">更新时间</div>
                <div class="text-sm">2024-03-15</div>
            </div>
        </div>
    </div>

    <!-- 奖励记录列表 -->
    <div class="bg-white rounded-lg mx-4 mb-16 card-shadow overflow-hidden">
        <div class="divide-y divide-gray-100">
            <!-- 现金奖励项 -->
            <div class="p-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="font-medium">完成保洁服务</div>
                        <div class="text-red-500">+¥58.00</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                        <div>2024-03-15 14:30</div>
                        <div class="text-green-500">已到账</div>
                    </div>
                </div>
            </div>
            
            <!-- 积分奖励项 -->
            <div class="p-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                    <i class="fas fa-coins"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="font-medium">首次下单奖励</div>
                        <div class="text-blue-500">+200</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                        <div>2024-03-10 09:15</div>
                        <div class="text-green-500">已到账</div>
                    </div>
                </div>
            </div>
            
            <!-- 现金奖励项 -->
            <div class="p-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="font-medium">推荐新用户</div>
                        <div class="text-red-500">+¥30.00</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                        <div>2024-03-05 18:45</div>
                        <div class="text-green-500">已到账</div>
                    </div>
                </div>
            </div>
            
            <!-- 积分奖励项 -->
            <div class="p-4 flex items-center">
                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mr-3">
                    <i class="fas fa-coins"></i>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="font-medium">月度活跃用户</div>
                        <div class="text-blue-500">+50</div>
                    </div>
                    <div class="flex justify-between text-sm text-gray-500 mt-1">
                        <div>2024-03-01 10:00</div>
                        <div class="text-green-500">已到账</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 空状态处理 -->
    <!-- <div class="bg-white rounded-lg mx-4 p-8 text-center empty-state" style="height: 300px; display: none;">
        <div class="pt-32">
            <div class="text-gray-500 mb-4">暂无奖励记录</div>
            <button class="bg-blue-500 text-white px-6 py-2 rounded-full text-sm">去下单获取奖励</button>
        </div>
    </div> -->

    <!-- 底部操作按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 py-3 px-6 flex justify-between max-w-750 mx-auto">
        <button class="bg-blue-500 text-white px-6 py-2 rounded-full text-sm flex-1 mr-2">
            <i class="fas fa-wallet mr-1"></i> 提现
        </button>
        <button class="bg-orange-500 text-white px-6 py-2 rounded-full text-sm flex-1 ml-2">
            <i class="fas fa-exchange-alt mr-1"></i> 积分兑换
        </button>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-16 left-0 right-0 bg-white shadow-lg max-w-750 mx-auto flex justify-around py-2">
        <a href="#" class="text-center px-4 py-2">
            <div class="text-gray-500"><i class="fas fa-home text-xl"></i></div>
            <div class="text-xs mt-1">首页</div>
        </a>
        <a href="#" class="text-center px-4 py-2">
            <div class="text-gray-500"><i class="fas fa-calendar-alt text-xl"></i></div>
            <div class="text-xs mt-1">预约</div>
        </a>
        <a href="#" class="text-center px-4 py-2 tab-active">
            <div class="text-blue-500"><i class="fas fa-gift text-xl"></i></div>
            <div class="text-xs mt-1 text-blue-500">奖励</div>
        </a>
        <a href="#" class="text-center px-4 py-2">
            <div class="text-gray-500"><i class="fas fa-user text-xl"></i></div>
            <div class="text-xs mt-1">我的</div>
        </a>
    </div>

    <footer class="text-center text-xs text-gray-400 py-4">
        <p>created by <a href="https://space.coze.cn" class="text-blue-400">coze space</a></p>
        <p>页面内容均由 AI 生成，仅供参考</p>
    </footer>

    <script>
        // 筛选切换逻辑
        document.querySelectorAll('.bg-gray-100').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelector('.filter-active').classList.remove('filter-active');
                this.classList.add('filter-active');
            });
        });

        // 模拟空状态
        // setTimeout(() => {
        //     document.querySelector('.divide-y').style.display = 'none';
        //     document.querySelector('.empty-state').style.display = 'block';
        // }, 1000);
    </script>
</body>
</html>